<template>
    <div class="main">
        <section v-loading="pageLoading">
            <div class="orderInfo">
                <div class="item">
                    <div class="item-label">订单号：</div>
                    <div class="item-value">{{$route.name === 'refundDetail' ? detail.relatingOrderSn : id}}</div>
                </div>
                <div class="item">
                    <div class="item-label">发货状态：</div>
                    <div class="item-value" v-if="!pageLoading">
                        {{(detail.shippingStatus &lt; 6) ? '待发货':'已发货'}}
                    </div>
                </div>
                <div class="item" v-if="$route.name==='refundDetail'">
                    <div class="item-label">订单状态：</div>
                    <div class="item-value" v-if="!pageLoading">
                        已退款
                    </div>
                </div>
                <div class="item">
                    <div class="item-label">订单金额：</div>
                    <div class="item-value" v-if="$route.name==='refundDetail'">{{detail.totalCostPrice?`${detail.totalCostPrice}元`:''}}</div>
                    <div class="item-value" v-else>{{detail.payment?`${detail.payment}元`:''}}</div>
                </div>
                <div class="item">
                    <div class="item-label">收货人：</div>
                    <div class="item-value">{{detail.receiverName}}</div>
                </div>
                <div class="item">
                    <div class="item-label">手机号：</div>
                    <div class="item-value">{{detail.receiverMobile}}</div>
                </div>
                <div class="item">
                    <div class="item-label">收货地址：</div>
                    <div class="item-value">{{detail.receiverAddress}}</div>
                </div>
                <template v-if="detail.shippingName && detail.shippingSn">
                    <div class="item">
                        <div class="item-label">物流公司：</div>
                        <div class="item-value">{{detail.shippingName}}</div>
                    </div>
                    <div class="item">
                        <div class="item-label">物流单号：</div>
                        <div class="item-value">{{detail.shippingSn}}</div>
                    </div>
                    <div class="item" v-if="expressMsg.length" style="margin-bottom: 24px">
                        <div class="item-label">物流信息：</div>
                        <div class="item-value" :style="`height: ${expressMsg.length*70}px`">
                            <el-steps direction="vertical">
                                <el-step v-for="(item, index) in expressMsg" :key="index" :title="item.time" :description="item.context"
                                         :status="index?'':(item.context.match('签收')?'success':'finish')">
                                    <template slot="icon">{{expressMsg.length-index}}</template>
                                </el-step>
                            </el-steps>
                        </div>
                    </div>
                </template>
                <div class="item">
                    <div class="item-label">订单商品：</div>
                    <div class="item-value">
                        <el-table :data="goodsList" element-loading-text="给我一点时间" border fit highlight-current-row>
                            <el-table-column align="center" label="商品名称" prop="goodsName"></el-table-column>
                            <el-table-column align="center" label="SKU" prop="sku"></el-table-column>
                            <el-table-column align="center" label="属性1" width="150">
                                <template slot-scope="scope">
                                    {{scope.row.attrValue || scope.row.attrValue1 || '-'}}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="属性2" width="150">
                                <template slot-scope="scope">
                                    {{scope.row.attrValue2 || '-'}}
                                </template>
                            </el-table-column>
                            <el-table-column align="center" label="数量" prop="goodsNumber" width="150"></el-table-column>
                            <template v-if="$route.name==='refundDetail'">
                                <el-table-column align="center" label="单价" prop="goodsPrice" width="150">
                                    <template slot-scope="scope">
                                        {{scope.row.costPrice / scope.row.goodsNumber}}
                                    </template>
                                </el-table-column>
                                <el-table-column align="center" label="总价" prop="costPrice" width="150"></el-table-column>
                            </template>
                            <template v-else>
                                <el-table-column align="center" label="单价" prop="goodsPrice" width="150"></el-table-column>
                                <el-table-column align="center" label="总价" width="150">
                                    <template slot-scope="scope">
                                        {{scope.row.goodsPrice * scope.row.goodsNumber}}
                                    </template>
                                </el-table-column>
                            </template>
                        </el-table>
                    </div>
                </div>
            </div>
            <div class="btn-block btn-container">
                <el-button type="primary" size="small" plain @click="$router.push({name: 'merchantOrder', params: {backFlag: true}})">
                    返回
                </el-button>
            </div>
        </section>
    </div>
</template>
<script>
  export default {
    name: 'merchantOrderDetail',
    props: {
      merchantId: { default: '' },
      id: { default: '' }
    },
    data () {
      return {
        pageLoading: true,
        detail: {},
        goodsList: [],
        expressMsg: []
      }
    },
    created () {
      this.fetchData()
    },
    methods: {
      fetchData (){
        this.request({
          url: '/merchant/orderInfo/detail',
          method: 'get',
          params: { orderSn: this.id, merchantId: this.merchantId }
        }).then(({data}) => {
          this.detail = data
          this.goodsList = data.orderGoodsList
          this.expressMsg = data.expressMsg || []
          this.pageLoading = false
        }).catch(err => {
          console.log(err);
          this.pageLoading = false
        });
      }
    }
  }
</script>
<style lang="scss">
    @import "../../../styles/mixin";
    .orderInfo{
        .item{
            @include flex;
            font-size: 14px;
            line-height: 40px;
            .item-label{
                color: #999;
                width: 90px;
                text-align: right;
            }
            .item-value{
                @include sub-item;
                @include user-select;

                img{
                    max-width: 128px;
                    max-height: 128px;
                }

                .el-step.is-vertical .el-step__line {
                    top: 12px;
                    bottom: -12px;
                }
            }
        }
    }
    .btn-container{
        text-align: center;
        margin-top: 32px;
    }
</style>
